<template>
	<view class="body">
		<view>
			<view class="titimg">
				<view class="title">合买大厅</view>
				<view class="image1" @click="goToHemai">
					<image class="img1" src="../../static/hongsegeren.png"></image>
				</view>
			</view>
		</view>
		<view class="quanbu">全部</view>

		<!-- tab栏 -->
		<view class="tabbox">
			<view v-for="(page, index) in pages" :key="index" class="tab">
				<view :class="{'active': current === index}" @click="checked(index)">
					{{ page.title }}
				</view>
			</view>
		</view>
		<!-- tab栏切换内容 -->
		<view v-if="current === 0" class="textimgbox">
			<view class="nrbox">
				<view class="image2">
					<image class="img2" :src="qhpages[0].img2"></image>
				</view>
				<view class="imgtext2">{{ qhpages[0].text }}</view>
			</view>
		</view>
		<view v-if="current === 1" class="textimgbox">
			<view class="nrbox">
				<view class="image2">
					<image class="img2" :src="qhpages[1].img2"></image>
				</view>
				<view class="imgtext2">{{ qhpages[1].text }}</view>
			</view>
		</view>
		<view v-if="current === 2" class="textimgbox">
			<view class="nrbox">
				<view class="image2">
					<image class="img2" :src="qhpages[2].img2"></image>
				</view>
				<view class="imgtext2">{{ qhpages[2].text }}</view>
			</view>
		</view>
		<view v-if="current === 3" class="textimgbox">
			<view class="nrbox">
				<view class="image2">
					<image class="img2" :src="qhpages[3].img2"></image>
				</view>
				<view class="imgtext2">{{ qhpages[3].text }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0, // 默认选中第一个tab
				pages: [{
						index: 0,
						title: '进度'
					},
					{
						index: 1,
						title: "最新"
					},
					{
						index: 2,
						title: "7日命中"
					},
					{
						index: 3,
						title: "我的关注"
					}
				],
				qhpages: [{
						img2: "../../static/zanwu.png",
						text: '进度'
					},
					{
						img2: "../../static/zanwu.png",
						text: '最新'
					},
					{
						img2: "../../static/zanwu.png",
						text: '7日命中'
					},
					{
						img2: "../../static/zanwu.png",
						text: '我的关注'
					}
				],
			};
		},
		
		methods: {
			goToHemai() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/hemaijilu/hemaijilu'
				});
			},
			checked(index) {
				this.current = index;
			},
		}
	};
</script>

<style>
	.body {
		width: 100%;
		height: 100vh;
		background-color: #f1efef;
	}

	.titimg {
		display: flex;
		background-color: #e23234;
		padding: 2%;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
		justify-content: center;
		align-items: center;
	}

	.title {
		/* font-size: 40rpx;
		color: white;
		width: 90%;
		font-weight: 700;
		padding-left: 39%;
		width: 50%; */
		font-size: 40rpx;
		color: white;
		/* width: 90%; */
		font-weight: 700;
		/* padding-left: 39%; */
		/* width: 50%; */
		text-align: center;
		/* padding-right: 19%;*/
	}

	.image1 {
		position: absolute;
		/* left: 30rpx; */
		right: 30rpx;
	}

	.img1 {
		/* padding-top: 16%; */
		width: 25px;
		height: 25px;
		display: block;
		/* margin: auto; */
		/* margin-left: 120px;*/
	}

	.quanbu {
		/* background-color: white;
		color: red;
		width: 100%;
		font-size: 35rpx;
		padding: 2%; */
		height: 40px;
		line-height: 40px;
		font-size: 15px;
		transition-duration: 0.5s;
		padding: 0px 15px;
		flex: 1 1 auto;
		width: auto;
		font-weight: bold;
		color: rgb(226, 50, 52);
		background: white;
	}

	.tabbox {
		width: 100%;
		display: flex;
		padding: 3% 0;
		justify-content: center;
		align-items: center;
	}

	.tab {
		/* flex: 1;
		text-align: center;
		margin: 0 10rpx;
		background-color: white;
		border: 2rpx solid white;
		border-radius: 20px;
		color: black;
		padding: 1%;
		font-size: 30rpx; */
		width: 79px;
		height: 32px;
		border-radius: 20px;
		box-shadow: 0 2px 8px 4px rgba(168, 167, 167, .12);
		background-color: #fff;
		color: #666;
		line-height: 32px;
		/* margin: auto; */
		text-align: center;
		margin: 0 auto;
		font-size: 12px;
	}

	.textimgbox {
		width: 100%;
		background-color: white;
		height: 70vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 	.nrbox{
		width: 50%;
	} */
	/* 	.image2{
		margin: 0 auto;
	} */
	.img2 {
		width: 100rpx;
		height: 100rpx;
		display: block;
		margin: 0 auto;
	}

	.imgtext2 {
		color: rgb(192, 196, 204);
		font-size: 30rpx;
		text-align: center;
		width: 300rpx;
		margin: 0 auto;
		/* 		margin: 7px 0px 0px; */
	}

	.active {
		/* background-color: #ffe0e0;
		color: red;
		border-color: red;
		font-size: 30rpx;
		padding: 3%;
		border-radius: 20px;
		border: 2rpx solid red; */

		border: 2px solid #e23234;
		background-color: rgba(226, 50, 52, .2784313725490196);
		color: #e23234;
		line-height: 30px;
		border-radius: 20px;
		font-size: 12px;
	}

	.tab::after {
		content: none;
	}
</style>
